<!DOCTYPE HTML>
<html>
<head>
    <include file="Public/head"/>
</head>
<body style="background-color: #fff;">
<!-- 头部 -->
<include file="Public/header"/>
<!-- /头部 -->

<!-- 主体 -->
<!--顶部Banner-->
<div class="jumbotron" style="margin-top: -20px;">
    <div class="container">
        <p>&nbsp;</p>
        <div class="row">
            <div class="col-xs-1">&nbsp;</div>
            <div class="col-xs-4">
                <p>&nbsp;</p>
                <h2>ThinkOX是一种精神</h2>
                <p class="text-muted" style="font-size: 18px; line-height: 1.75em;">基于OneThink，同步更新，<br/>让Web开发更快速！</p>
                <p>
                    <a class="btn btn-primary btn-lg" style="font-size: 1.5em;" target="_blank" href="/ThinkOXRC.zip">
                        <span class="glyphicon glyphicon-download" style="top: 5px;"></span>
                        下载RC

                    </a>

                </p>
                <p>
                    <a class="btn btn-primary btn-lg" style="font-size: 1.5em;" target="_blank" href="http://url.cn/Mk090o">
                        <span class="glyphicon glyphicon-user" style="top: 5px;"></span>
                        加入讨论群

                    </a>
                </p>
                <p style="font-size: 14px;">最新版本v0.1 RC</p>
            </div>
            <div class="col-xs-6">
                <img src="__PUBLIC__/Home/images/oneplus/index-computer.png" style="width: 100%;"/>
            </div>
            <div class="col-xs-1">&nbsp;</div>
        </div>

        <p>&nbsp;</p>
    </div>
</div>

<!--特性介绍-->
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <p>&nbsp;</p>
            <h1 class="text-center">什么是ThinkOX？</h1>
            <p>&nbsp;</p>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-4">
            <div class="text-center">
                <div class="index-feature-div">
                    <img src="__PUBLIC__/Home/images/oneplus/index-icon-hand.png"/>
                </div>
            </div>
            <h3 class="index-feature-title">强化的用户中心</h3>
            <h4 class="index-feature-text">
                基于OneThink的强力扩展，<br/>
                不断丰富的用户中心，<br/>
                同步合并，紧跟OT脚步。
            </h4>
        </div>
        <div class="col-xs-4">
            <div class="text-center">
                <div class="index-feature-div">
                    <img src="__PUBLIC__/Home/images/oneplus/index-icon-cloud.png"/>
                </div>
            </div>
            <h3 class="index-feature-title">云端部署</h3>
            <h4 class="index-feature-text">
                通过驱动的方式可以轻松支持云<br/>
                平台的部署，让你的网站无缝迁移，
                内置已经支持SAE。
            </h4>
        </div>
        <div class="col-xs-4">
            <div class="text-center">
                <div class="index-feature-div">
                    <img src="__PUBLIC__/Home/images/oneplus/index-icon-shield.png"/>
                </div>
            </div>
            <h3 class="index-feature-title">安全可靠</h3>
            <h4 class="index-feature-text">
                提供的稳健的安全策略，包括备份恢复，容错，防止恶意攻击登陆，网页防篡改等多项安全管理功能，保证系统安全，可靠，稳定的运行。
            </h4>
        </div>
    </div>
</div>

<!--翻屏按钮-->
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <p style="height: 8em;">&nbsp;</p>
            <hr class="index-screen-hr"/>
            <div class="text-center">
                <div class="index-screen-button" id="turn-screen">&#x25BC;</div>
            </div>
            <p style="height: 8em;">&nbsp;</p>
        </div>
    </div>
</div>

<!--特性介绍-->
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <table style="width: 100%;" class="index-feature-table">
                <tbody>
                <tr>
                    <td rowspan="2" style="width: 33.3333333333%">
                        <ul><li>
                            <div class="index-feature-text2">
                                <span>头像插件<br/>允许用户上传自己的头像</span>
                            </div>
                            <img class="index-feature-img" src="__PUBLIC__/Home/images/oneplus/index-feature-avatar.png"/>
                        </li></ul>
                    </td>
                    <td style="width: 16.666666666666%">
                        <ul><li>
                            <div class="index-feature-text2">
                                <span>升级至最新<br/>Bootstrap</span>
                            </div>
                            <img class="index-feature-img" src="__PUBLIC__/Home/images/oneplus/index-feature-bootstrap.png"/>
                        </li></ul>
                    </td>
                    <td rowspan="3">
                        <ul><li>
                            <div class="index-feature-text2">
                                <span>前台个人中心</span>
                            </div>
                            <img class="index-feature-img" src="__PUBLIC__/Home/images/oneplus/index-feature-oneuser.png"/>
                        </li></ul>
                    </td>
                </tr>
                <tr>
                    <td>
                        <ul><li>
                            <div class="index-feature-text2">
                                <span>讨论区</span>
                            </div>
                            <img class="index-feature-img" style="" src="__PUBLIC__/Home/images/oneplus/index-feature-forum.png"/>
                        </li></ul>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <ul><li>
                            <div class="index-feature-text2">
                                <span>本地评论功能</span>
                            </div>
                            <img class="index-feature-img" src="__PUBLIC__/Home/images/oneplus/index-feature-comment.png"/>
                        </li></ul>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- /主体 -->

<!-- 底部 -->
<include file="Public/footer"/>
<!-- /底部 -->
</body>
</html>

<block name="script">
    <script>
        //实现翻屏按钮
        $(function(){
            $('#turn-screen').click(function(){
                var screen = $('html,body');
                screen.animate({scrollTop: $(this).offset().top + $(this).parent().height() + 20})
            })
        })

        //鼠标移动到特性介绍图片的时候显示文字
        $('.index-feature-table ul li').mouseenter(function(){
            var image= $(this).find('img');
            var caption = $(this).find('div');

            caption.width(image.width());
            caption.height(image.height());
            caption.animate({opacity: 1});
        }).mouseleave(function(){
            var image= $(this).find('img');
            var caption = $(this).find('div');

            caption.width(image.width());
            caption.height(image.height());
            caption.animate({opacity: 0});
        });
    </script>
</block>